<template>
    <div class="tooltip">
        <el-tooltip effect="light" placement="top" popper-class="popper-tips">
            <template #content>
                <el-scrollbar max-height="145px">
                    <div class="popover">
                        <div v-for="item in props.content" :key="item.id" class="popover-item">
                            <div class="msg">
                                {{ item?.contact }}{{ item?.mobile ? '-' + item?.mobile + '-' : '-' }}
                            </div>
                            <div class="msg">{{ item?.region || '' + item?.address }}</div>
                        </div>
                    </div>
                </el-scrollbar>
            </template>
            <span class="address">{{ `${props.content.length}个地址` }}</span>
        </el-tooltip>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue';

type contentType = {
    id: string;
    [propName: string]: string;
};
interface Props {
    content: contentType[];
}
const props = withDefaults(defineProps<Props>(), {
    content: () => []
});
</script>
<style scoped lang="scss">
.popper-tips {
    .popover {
        background-color: #fff;
        box-shadow: 0 0 40px #ddd;
        max-height: 320px;
        .popover-item {
            margin: 0 10px;
            height: 40px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ddd;
            &:last-of-type {
                border-bottom: none;
            }
            .msg {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
            }
        }
    }
}
.address {
    color: #ff6b00;
    cursor: pointer;
}
</style>
